<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的生命周期</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p id="mm">{{message}}</p>
        <input type="text" v-model="message">
        <p v-for="(user,index) in userList" :key="index">
            {{user.name}}--{{user.age}}--{{user.sex}}
        </p>
    </div>
</body>

</html>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'hello world',
            userList: []
        },
        methods: {
            // 获取数据列表
            getList() {
                this.userList = [
                    { name: '张三', age: 18, sex: '男' },
                    { name: '李四', age: 18, sex: '男' },
                    { name: '王五', age: 18, sex: '男' }
                ]
            }
        },
        // 生命周期
        beforeCreate() {
            console.log('beforeCreate 生命周期中第一个函数')
            console.log(this.message)
        },
        // 创建完成
        created() {
            console.log('created 生命周期中第二个函数')
            console.log(this.message)
            this.getList()
        },
        // 挂载之前
        beforeMount() {
            console.log('beforeMount 生命周期中第三个函数')
            console.log(document.getElementById('mm').innerHTML)
        },
        // 挂载完成
        mounted() {
            console.log('mounted 生命周期中第四个函数')
            console.log(document.getElementById('mm').innerHTML)
        },
        // 更新之前
        beforeUpdate() {
            console.log('beforeUpdate 生命周期中第五个函数')
            console.log(document.getElementById('mm').innerHTML)
        },
        // 更新完成
        updated() {
            console.log('updated 生命周期中第六个函数')
            console.log(document.getElementById('mm').innerHTML)
        },
        // 销毁之前
        beforeDestroy() {
            console.log('beforeDestroy 生命周期中第七个函数')
        }


    })
</script>